<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
<title>Insert title here</title>
</head>
<body>
  <div>
     <ul>
       name<li><input name="name"/></li>
       sex<li><input name="sex" value="true" type="radio"/>男<input value="false" name="sex" type="radio"/>女</li>
       sal<li><input name="sal"/></li>
       birth<li><input type="date" name="birth"/></li>
       <li><button id="add">add</button></li>
     </ul>
  
  </div>
  
  <div>
    <table>
      <thead>
       <tr>
          <td>id</td>
          <td>name</td>
          <td>sal</td>
          <td>sex </td>
	      <td>birth</td>
	      <td>删除</td>
	      <td>修改</td>
       </tr>
      </thead>
      <tbody id="tb"></tbody>
    </table>
  
  </div>
</body>

<script type="text/javascript">
  $(function(){
     var list =[];
     //ajax请求
    var ajaxProduce = function(){
        var ajax = {}
        ajax.post = function(requestConfig,callback,otherParam){
          requestConfig.type="POST"
          $.ajax(requestConfig).done(function(data){
          
            callback(data,otherParam);
          });
        };
        
         ajax.get = function(requestConfig,callback,otherParam){
          requestConfig.type="GET";
          requestConfig.url = "list";
          requestConfig.contentType = "application/json";
          $.ajax(requestConfig).done(function(data){
            callback(data,otherParam);
          });
        };
      return ajax;
    };
     
     //dao 层
    var daoFactory = function(ajax){
      var dao = {};
      dao.finfAll = function(requestConfig){
        ajax.get(requestConfig,initList);
      };
      
      dao.insert = function(requestConfig){
       ajax.post(requestConfig,insertOne);
      };
      
      dao.removeOne = function(requestConfig){
           ajax.post(requestConfig,remove);
      };
      
      function remove(one,other){
        item = one;
      }
      
      
      function insertOne(one,other){
        //alert(one.id);
         item = one;
         //alert(item.id);
      }
      
      function initList(data,other){
         //alert(data);
         alert("dao.initList.data:"+data);
         list = data;
         var tbody = $("#tb");
         var  tableView = tableProduce();
         tableView.initTable(tbody);
         //alert(list.length);
      }
      
      return dao;
    
    };
    
 
         //service层
     var serviceFactory = function(dao){
       var service = {};
      service.loadTable = function (){
       var ajax = ajaxProduce();
       var requestConfig={};
       requestConfig.url = "list";
       requestConfig.contentType = "application/json";
       dao.finfAll(requestConfig);
     };
       
       service.addTr = function addTr(one){
       var ajax = ajaxProduce();
       var requestConfig={};
       requestConfig.url = "addcustomer";
       requestConfig.data = JSON.stringify(one);
       requestConfig.contentType = "application/json";
       dao.insert(requestConfig);
       var tbody = $("#tb");
       var  tableView = tableProduce();
          tableView.appendTr(tbody,item);
          alert("item:"+item);
      };
      
      service.deleteTr = function (one,thisTr){
           var ajax = ajaxProduce();
           var requestConfig={};
           requestConfig.url = "delete";
           requestConfig.data = JSON.stringify(one);
           requestConfig.contentType = "application/json";
            dao.removeOne(requestConfig);
             if(item){
                  thisTr.remove();
                };
    };
     
       return service;
     }
     
     
     //controller层
    var controllerFactory = function(service){
      var controller ={};
      controller.initTable = function(){
      alert("init...");
       service.loadTable();
      };
      controller.addOne = function(){
        var data = {"cname":$("input[name='name']").val(),
         "sex":$("input[name='sex']").val(),
         "sal":$("input[name='sal']").val(),
         "birth":$("input[name='birth']").val()
        };
        service.addTr(data);
      };
      return controller;
    }
     
     //table渲染器
    var tableProduce = function(){
       var tanleView = {};
       
       tanleView.appendTr = function(tbody,c){
         if(c){
         var tr = $("<tr></tr>");
           var td1 = $("<td></td>");
           var td2 = $("<td></td>");
           var td3 = $("<td></td>");
           var td4 = $("<td></td>");
           var td5 = $("<td></td>");
           var td6 = $("<td></td>");
           var td7 = $("<td></td>");
           var dbt =$("<button>删除</button>");
           var ubt =$("<button>修改</button>");
           dbt.attr("id",c.id).addClass("delete");
           dbt.on("click",function(){
               var thisTr = $(this).parent().parent();
               var id =  $(this).attr("id");
               var data = {"id":id};
              
              });
           ubt.attr("id",c.id).addClass("update");
           td1.text(c.id);
           td2.text(c.cname);
           td3.text(c.sal);
           td4.text(c.sex);
           td5.text(c.birth);
           td6.append(dbt);
           td7.append(ubt);
           tr.append(td1);
           tr.append(td2);
           tr.append(td3);
           tr.append(td4);
           tr.append(td5);
           tr.append(td6);
           tr.append(td7);
           tbody.append(tr);
         }
       
       };
      tanleView.initTable  = function(tbody){
        alert("tanleView.initTable:"+list);
        if(list){
         list.forEach(c=>{
           tanleView.appendTr(tbody,c);
        });
        }
      };
    
      return tanleView;
    }
    
    
     var dao = daoFactory(ajaxProduce());
     var service = serviceFactory(dao);
     var controller = controllerFactory(service);
    //加载界面时初始化table
    controller.initTable();
     
     //添加一条数据
    $("#add").on("click",function(){
       controller.addOne();
    });
    
 });
</script>
</html>